:root{
    --header-height:50px;
    --header-shadow: 204, 204, 204;
    --task-card:#e7e7e7;
    --bgc:#f1f1f1;
    --shadow:1px 1px 10px 1px #979797;
    --border:#dbdbdb;
    --main-color:#825794;
}

@media (min-width: 576px) {
    .main {
        width: 540px;
    }
    .card-columns{
        -moz-column-count:4; /* Firefox */
        -webkit-column-count:4; /* Safari and Chrome */
        column-count: 2;
    }
}

@media (min-width: 768px) {
    .main {
        width: 720px;
    }
    .card-columns{
        -moz-column-count:3; /* Firefox */
        -webkit-column-count:3; /* Safari and Chrome */
        column-count: 3;
    }
}

@media (min-width: 992px) {
    .main {
        width: 960px;
    }
    .card-columns{
        -moz-column-count:4; /* Firefox */
        -webkit-column-count:4; /* Safari and Chrome */
        column-count: 4;
    }
}

@media (min-width: 1200px) {
    .main {
        width: 1150px;
    }
    .card-columns{
        -moz-column-count:4; /* Firefox */
        -webkit-column-count:4; /* Safari and Chrome */
        column-count: 4;
    }
}

@media (min-width: 1500px) {
    .main {
        width: 1440px;
    }
    .card-columns{
        -moz-column-count:5; /* Firefox */
        -webkit-column-count:5; /* Safari and Chrome */
        column-count: 5;
        column-gap: 10px;
    }
}

@media screen and (min-width:1800px) {
    .main {
        width: 1650px;
    }
    .card-columns{
        -moz-column-count:5; /* Firefox */
        -webkit-column-count:5; /* Safari and Chrome */
        column-count: 5;
        column-gap: 10px;
    }
}

.header{
    /* display: none; */
    height: var(--header-height);
    width: 100%;
    z-index: 99;
    position: fixed;
    top: 0;
    background-color: var(--task-card);
    box-shadow: var(--shadow);
    line-height: var(--header-height);
}

.header .main{
    margin: -40px auto;
    height: var(--header-height);   
    line-height: var(--header-height);
}
.header .usercenter{
    width: 25px;
    height: 25px;
    float: right;
    margin: 10px 20px;  
    line-height: 25px;
    cursor: pointer;  
}
.header .downing{
    width: 25px;
    height: 25px;
    float: right;
    line-height: 25px;
    margin: 10px 20px;
}
.header li{
    float: left;
    height: var(--header-height);
    margin: 0 10px;
    padding: 0 10px;
    line-height: var(--header-height);
    font-size: 20px;
    font-weight: 600;
    border-bottom: 2px solid var(--task-card);
    /* background-color: var(--main-color); */
}
.header li:hover{
    cursor: pointer;
    border-bottom-color: var(--main-color);
    color: var(--main-color);
}

.header .main .active {
    border-bottom-color: var(--main-color);
    color: var(--main-color);
}
